@mixin header {
  .header{
    padding: 0 40rpx;
    height: 50rpx;
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
      height: 100%;
      align-items: center;
      .mark{
        width: 8rpx;
        height: 34rpx;
        margin-top: 6rpx;
        background-image: linear-gradient(to bottom, #F26182 5%, #F1A064 100%);
      }
      .title{
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #DFDFDF; 
        margin-left: 10rpx;
      }
    }
    .right{
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #DFDFDF;
    }
  }
}
.home{
  width: 100%;
  // 头部
  .home-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    height: 60rpx;
    .city{
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      image{
        width: 26.3rpx;
        height: 13.6rpx;
        margin-left: 9.4rpx;
      }
    }
    .search{
      width: 518rpx;
      height: 60rpx;
      background: #33363D;
      box-shadow: 0 0 8rpx 2rpx rgba(0,0,0,0.33);
      border-radius: 26rpx;
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      image{
        width: 27.3rpx;
        height: 27rpx;
        margin: 0 14.7rpx 0 24rpx;
      }
    }
    .date{
      width: 36rpx;
      height: 37.4rpx;
    }
  }
  // 轮播图
  .swiper{
    width: 100%;
    height: 360rpx;
    swiper{
      height: 100%;
    }
    image{
      width: 100vw;
      height: 163px !important;
    }
  }
  // 热映影片
  .hot{
    @include header;
    .content{
      padding-left: 50rpx;
      overflow: auto;
      display: flex;
      margin: 16rpx 0 56rpx 0;
      .item{
        width: 180rpx;
        margin-right: 46rpx;
        // 图片
        .img-container{
          width: 180rpx;
          height: 244rpx;
          position: relative;
          border-radius: 10rpx;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
          .mask{
            position: absolute;
            bottom: 9rpx;
            left: 10rpx;
            font-family: PingFangSC-Regular;
            font-size: 18rpx;
            color: #DFDFDF;
          }
        }
        // 标题及按钮
        .title{
          width: 149rpx;
          height: 33rpx;
          margin-top: 12rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: PingFangSC-Medium;
          font-size: 24rpx;
          color: #DFDFDF;
        }
        .btn{
          width: 100rpx;
          height: 44rpx;
          background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
          box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.50);
          border-radius: 22rpx;
          line-height: 44rpx;
          text-align: center;
          margin-left: 24rpx;
          margin-top: 7rpx;
          font-family: PingFangSC-Medium;
          font-size: 24rpx;
          color: #DFDFDF;
          text-shadow: 0 4rpx 8rpx rgba(49,49,49,0.50);
        }
      }
    }
  }
  // 即将上映
  .coming{
    @include header;
    .content{
      padding-left: 42rpx;
      overflow: auto;
      display: flex;
      margin: 16rpx 0 56rpx 0;
      .item{
        width: 240rpx;
        margin-right: 28rpx;
        // 图片
        .img-container{
          width: 240rpx;
          height: 324rpx;
          border-radius: 10rpx;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
        }
        // 标题及按钮
        .title{
          width: 191rpx;
          height: 40rpx;
          margin-top: 10rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: PingFangSC-Medium;
          font-size: 28rpx;
          color: #DFDFDF;
        }
        .date{
          height: 33rpx;
          opacity: 0.55;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #DFDFDF;
        }
      }
    }
  }
  // 精彩预告
  .trailer{
    @include header;
    .content{
      padding-left: 42rpx;
      overflow: auto;
      display: flex;
      margin: 16rpx 0 56rpx 0;
      .item{
        width: 590rpx;
        margin-right: 32rpx;
        // 图片
        .img-container{
          width: 590rpx;
          height: 320rpx;
          position: relative;
          border-radius: 10rpx;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
          .mask{
            position: absolute;
            bottom: 16rpx;
            padding: 0 16rpx;
            display: flex;
            justify-content: space-between;
            opacity: 0.74;
            font-family: PingFangSC-Regular;
            font-size: 20rpx;
            color: #FFFFFF;
          }
          .pause{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            image{
              width: 76rpx;
              height: 76rpx;
              border-radius: 50%;
              margin: auto;
            }
          }
        }
        // 标题
        .title{
          margin-top: 16rpx;
          font-family: PingFangSC-Medium;
          font-size: 26rpx;
          color: #DFDFDF;
        }
      }
    }
  }
}
// 轮播图自定义小点样式
swiper.square-dot .wx-swiper-dot {
  background:  #B2B2B2;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
  margin: 0 8rpx !important;
  margin-bottom: -10rpx !important;
}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active{
	opacity: 1;
	width: 40rpx;
}